<template>
    <div>
        <p>标题</p>
        <el-input v-model="baoti" placeholder="请输入内容"></el-input>
        <p>摘要</p>
        <el-input v-model="zhaoyao" placeholder="请输入内容"></el-input>
        <p>关键字</p>

        <el-input v-model="gunajianzi" placeholder="请输入内容"></el-input>

        <div class="zw">
            <p>正文</p>
            <br>
            <quill-editor
                    class="zz"
                    ref="myQuillEditor"
                    @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                    @change="onEditorChange($event)">
            </quill-editor>
            </div>
        <el-button type="primary">发布</el-button>



        </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    export default {
        name: "wdwz",
        components:{
            quillEditor
        },
        data(){
            return{
            }
        },
        methods: {
            onEditorBlur(editor){//失去焦点事件
            },
            onEditorFocus(editor){//获得焦点事件
            },
            onEditorChange({editor,html,text}){//编辑器文本发生变化
                //this.content可以实时获取到当前编辑器内的文本内容
                console.log(this.content);
            },
            onSubmit() {
                console.log('submit!');
            }
        }
    }
</script>

<style scoped lang="less">
    p{
        float: left;
        height: 30px;
        line-height: 30px;
    }
    .zw{
        margin-top: 6px;

    }
.zz{
    margin-top:10px;
}
</style>